<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	const currentPage = ref(1)
	const storeList = ref([])
	async function getDetail() {
		const res = await http.request({
			url: '/api/user/balanceLog',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
			},
		})
		console.log(res)
		storeList.value = [...storeList.value, ...res.data]
	}

	// 上拉加载
	onReachBottom(() => {
		++currentPage.value
		getDetail() // 获取的数据列表
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		currentPage.value = 1
		storeList.value = []
		getDetail() // 获取的数据列表
		uni.showToast({
			title: '刷新成功',
			icon: 'success',
			duration: 2000,
		})
		uni.stopPullDownRefresh() // 停止刷新
	})

	onLoad(() => {
		getDetail()
	})
</script>

<template>
	<view class="bar"> </view>
	<view class="store-detail" v-if="storeList.length">
		<view class="detail-item" v-for="item in storeList" :key="item.id">
			<view class="left">
				<view class="" style="font-size: 28rpx">
					{{ item.title }}
				</view>
				<view class="" style="font-size: 22rpx; color: #9b9b9d">
					{{ parseTime(item.add_time) }}
				</view>
			</view>
			<view class="right" v-if="item.in_type == 1">
				+{{ item.money }}
			</view>
			<view class="right" v-else> -{{ item.money }} </view>
		</view>
	</view>
	<view
		class=""
		style="
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 200rpx;
		"
		v-else
	>
		<image
			src="https://ojqn.wm2177.com/wechat_imgs/store-null.png"
			style="width: 214rpx; height: 214rpx"
			mode=""
		></image>
		<view
			class=""
			style="margin-top: 22rpx; font-size: 26rpx; color: #cacaca"
		>
			暂无记录
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.bar {
		height: 20rpx;
		background-color: #f5f5f5;
	}
	.store-detail {
		padding: 20rpx;
		.detail-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 154rpx;
			border-bottom: 2rpx solid #f5f5f5;
			&:last-child {
				border: none;
			}
			.right {
				font-weight: 700;
				font-size: 26rpx;
				color: $all-color;
			}
		}
	}
</style>
